import React from 'react';
import { Card } from 'antd';
import * as Icons from '@ant-design/icons';
import moment from 'moment';

const gridStyle = {
  width: '33.3%',
  textAlign: 'center',
};

export default function (props) {

    function createCards () {
        return props.data.map((d, i) => {
            const CurrentIcon = Icons[d.icon];
            return (
                <Card.Grid style={gridStyle} key={ i }>
                    { d.title }
                    { <CurrentIcon /> }
                    { moment(d.timestamp).fromNow() }
                </Card.Grid>
            );
        });
    }

    return <Card title="进行中的项目">{ createCards() }</Card>;
}
